<template>
  <div class="siteMaintenance">
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        {{ NameList }}
      </p>
      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!--主题内容部分开始-->
    <div class="Main">
      <p>基本信息</p>
      <div class="header">
        <ul>
          <li>
            <span>站点编号</span>
            <el-input style="width: 70%;" v-model="from_site.siteNumber" :disabled="edit==0 || edit==1"></el-input>
          </li>
          <li>
            <span>站点名称</span>
            <el-input style="width: 70%;" v-model="from_site.siteName" :disabled="edit==0 || edit==1"></el-input>
          </li>
          <li>
            <span>站点地址</span>
            <el-input style="width: 70%;" v-model="from_site.siteAddress" :disabled="edit==0 || edit==1"></el-input>
          </li>
          <li>
            <span>法人</span>
            <el-input style="width: 70%;" v-model="from_site.legalPerson" :disabled="edit==1"></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input style="width: 70%;" v-model="from_site.legalpersonPhone" :disabled="edit==1"></el-input>
          </li>
          <li>
            <span>站点负责人</span>
            <el-input style="width: 70%;" v-model="from_site.siteResponsible" :disabled="edit==0 || edit==1"></el-input>
          </li>
          <li>
            <span>站点负责人联系方式</span>
            <el-input style="width: 70%;" v-model="from_site.account" :disabled="edit==0 || edit==1"></el-input>
          </li>
          <li>
            <span>所在区域</span>
            <el-input style="width: 70%;" v-model="from_site.area" :disabled="edit==0 || edit==1"></el-input>
          </li>
          <li>
            <span>区域负责人</span>
            <el-input style="width: 70%;" v-model="from_site.areaResponsible" :disabled="edit==1"></el-input>
          </li>
          <li>
            <span>区域负责人联系方式</span>
            <el-input style="width: 70%;" v-model="from_site.areaResponsiblePhone" :disabled="edit==1"></el-input>
          </li>
          <li>
            <span>开户行</span>
            <el-input style="width: 70%;" v-model="from_site.accountBank" :disabled="edit==1"></el-input>
          </li>
          <li>
            <span>开户账号</span>
            <el-input style="width: 70%;" v-model="from_site.accountOpen" :disabled="edit==1"></el-input>
          </li>
          <li>
            <span>纳税人识别号</span>
            <el-input style="width: 70%;" v-model="from_site.taxpayerNumber" :disabled="edit==1"></el-input>
          </li>
          <li>
            <span>账户名称</span>
            <el-input style="width: 70%;" v-model="from_site.account" :disabled="edit==0 || edit == 1"></el-input>
          </li>
          <li>
            <span>密码</span>
            <el-input style="width: 70%;" v-model="from_site.password" :disabled="edit==0 || edit == 1"></el-input>
          </li>
        </ul>
      </div>
      <p>上传图片</p>
      <div class="intermediate">
        <ul>
          <li>
            <span>现场照片 :</span>
            <div style="width: 148px;height: 148px;display: inline-block;overflow: hidden">
              <el-upload
                v-show="edit==0"
                action="/JX_java/common/fileUpLoad" list-type="picture-card" :limit="edit==0?2:1"
                :show-file-list="false"
                :on-success="function (res, file) { return handleSuccess_site(res, file)}"
                :before-upload="beforeImageUpload"
                :file-list="fileListSite"
              >
                <el-image v-if="imgPathSite" :src="imgPathSite"></el-image>
                <i v-else class="el-icon-plus"></i>
              </el-upload>

              <el-image v-if="imgPathSite" :src="imgPathSite" v-show="edit==1"></el-image>
            </div>
          </li>
          <li>
            <span>授权合同 :</span>
            <div style="width: 148px;height: 148px;display: inline-block;overflow: hidden">
              <el-upload
                v-show="edit==0"
                action="/JX_java/common/fileUpLoad" list-type="picture-card" :limit="edit==0?2:1"
                :show-file-list="false"
                :on-success="function (res, file) { return handleSuccess_contract(res, file)}"
                :before-upload="beforeImageUpload"
                :file-list="fileListSite"
              >
                <el-image v-if="imgPathContract" :src="imgPathContract"></el-image>
                <i v-else class="el-icon-plus"></i>
              </el-upload>
              <el-image v-if="imgPathContract" :src="imgPathContract" v-show="edit==1"></el-image>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--底部按钮-->
    <div class="bottom">
      <el-button v-if="edit==0" type="primary" size="medium" @click="updateSite">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
  </div>
</template>


<script>
import axios from "axios";

export default {


  data() {
    return {
      edit: null,
      from_site: {},
      textarea: "",
      tableData: [{}],
      imgPathSite: "",
      imgPathContract: "",
      NameList: "站点修改",
      fileListSite: [],//现场图片的集合
      fileListContract: [],//现场图片的集合
      isedits : false,
    };
  },
  created() {
    this.edit = this.$route.query.edit
    if (this.edit == 0) {
      this.NameList = "站点修改"
      this.isedits  = true
    } else {
      this.NameList = "站点详情"
      this.isedits  = false
    }
    if (this.edit >= 0) {
      let id = this.$route.query.id;
      axios.get("/JX_java/afferSale/getSiteTbDetais?userId=" + id).then(res => {

        let {data, moreInfo, error} = res.data
        // console.log(JSON.parse(data.xianzhaozhaopian)[0].url)
        console.log(data,1111111111111111111)
        this.from_site = data;
        this.imgPathSite = JSON.parse(data.xianzhaozhaopian)[0].url
        this.fileListSite = JSON.parse(data.xianzhaozhaopian)
        this.imgPathContract = JSON.parse(data.contract)[0].url
        this.fileListContract = JSON.parse(data.contract)
      })
    }
  },
  methods: {
    //更新站点信息
    updateSite() {
      this.from_site.xianzhaozhaopian = JSON.stringify(this.fileListSite).toString();
      this.from_site.contract = JSON.stringify(this.fileListContract).toString();
      axios.post("/JX_java/afferSale/site/updateSite", this.from_site).then(res => {
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.$router.go(-1);
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
    //文件上传
    handleSuccess_site(res, file) {
      this.fileListSite = []
      this.fileListSite.push({name: res.data.name, url: res.data.url})
      this.imgPathSite = res.data.url;
      console.log(this.fileListSite)
    },
    handleSuccess_contract(res, file) {
      this.fileListContract = []
      this.fileListContract.push({name: res.data.name, url: res.data.url})
      this.imgPathContract = res.data.url;
      console.log(this.fileListContract)
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }

}

</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.Main {
  width: 98%;
  //margin-left: 10px;
  margin: auto;
  background: #fff;

  p {
    //text-align: center;
    font-weight: 700;
    font-size: 20px;
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    margin-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .header {
    //border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    padding-bottom: 20px;
    margin: auto;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 33%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 28%;
        }
      }
    }
  }

  .intermediate {
    //border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    margin: auto;
    padding-bottom: 20px;

    ul {
      margin-top: 20px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      li {
        width: 45%;
        font-size: 14px;
        margin-bottom: 10px;
        margin-right: 20px;
        display: flex;
        align-items: flex-start;

        span {
          display: inline-block;
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }
}

.bottom {
  padding-top: 20px;
  text-align: center;
}
</style>
